import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { ArrowLeft, Star, ShoppingCart, Share2, Download, Bookmark, ThumbsUp, MessageCircle } from 'lucide-react';
export function ReportDetail() {
  const {
    productId
  } = useParams();
  // This would normally be fetched from an API based on the productId
  // For now, we'll use a static object that matches the productId
  const reportData = getReportById(productId);
  if (!reportData) {
    return <div className="w-full bg-earth-dark min-h-screen py-16">
        <div className="container mx-auto px-4 text-center">
          <h1 className="font-display text-3xl mb-4">Report Not Found</h1>
          <p className="mb-8">
            The report you're looking for doesn't exist or has been moved.
          </p>
          <Link to="/reports" className="inline-flex items-center bg-outdoor-orange hover:bg-climbing-red text-white font-display px-6 py-3 rounded transition-colors">
            <ArrowLeft size={16} className="mr-2" />
            Back to Reports
          </Link>
        </div>
      </div>;
  }
  // Format date to readable string
  const formatDate = dateString => {
    const options = {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    };
    return new Date(dateString).toLocaleDateString(undefined, options);
  };
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative py-20 bg-carbon-black">
        <div className="absolute inset-0 z-0 opacity-30">
          <img src={reportData.heroImage} alt={reportData.title} className="w-full h-full object-cover" />
        </div>
        <div className="container mx-auto px-4 relative z-10">
          <Link to="/reports" className="inline-flex items-center text-sand-light hover:text-outdoor-orange mb-4 transition-colors">
            <ArrowLeft size={16} className="mr-2" />
            Back to Reports
          </Link>
          <div className="max-w-4xl">
            <div className="flex flex-wrap items-center gap-3 mb-4">
              <span className="bg-outdoor-orange px-3 py-1 text-sm font-bold">
                {reportData.category.toUpperCase()}
              </span>
              <span className="text-gray-300">
                Published: {formatDate(reportData.date)}
              </span>
            </div>
            <h1 className="font-display text-4xl md:text-6xl text-white mb-6">
              {reportData.title}
            </h1>
            <div className="flex items-center mb-6">
              <div className="flex mr-4">
                {[...Array(5)].map((_, i) => <Star key={i} size={24} className={i < reportData.rating ? 'text-outdoor-orange fill-outdoor-orange' : 'text-gray-500'} />)}
              </div>
              <span className="text-xl font-bold">{reportData.rating}/5</span>
            </div>
            <p className="text-xl text-sand-light max-w-3xl">
              {reportData.excerpt}
            </p>
          </div>
        </div>
      </section>
      {/* Report Content */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Main Content */}
            <div className="lg:col-span-2">
              {/* Product Overview */}
              <div className="bg-carbon-black rounded-lg overflow-hidden mb-8">
                <div className="p-8">
                  <h2 className="font-display text-3xl mb-6">
                    PRODUCT OVERVIEW
                  </h2>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                    <div className="bg-earth-dark p-4 rounded-lg text-center">
                      <div className="text-gray-400 text-sm mb-1">MSRP</div>
                      <div className="font-display text-xl">
                        ${reportData.specs.price}
                      </div>
                    </div>
                    <div className="bg-earth-dark p-4 rounded-lg text-center">
                      <div className="text-gray-400 text-sm mb-1">WEIGHT</div>
                      <div className="font-display text-xl">
                        {reportData.specs.weight}
                      </div>
                    </div>
                    <div className="bg-earth-dark p-4 rounded-lg text-center">
                      <div className="text-gray-400 text-sm mb-1">BRAND</div>
                      <div className="font-display text-xl">
                        {reportData.brand}
                      </div>
                    </div>
                    <div className="bg-earth-dark p-4 rounded-lg text-center">
                      <div className="text-gray-400 text-sm mb-1">BEST FOR</div>
                      <div className="font-display text-xl">
                        {reportData.specs.bestFor}
                      </div>
                    </div>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <img src={reportData.images[0]} alt={reportData.title} className="w-full h-80 object-cover rounded-lg" />
                    <div>
                      <h3 className="font-display text-2xl mb-4">
                        KEY FEATURES
                      </h3>
                      <ul className="space-y-3">
                        {reportData.keyFeatures.map((feature, index) => <li key={index} className="flex">
                            <div className="mr-2 mt-1 w-2 h-2 bg-outdoor-orange rounded-full flex-shrink-0"></div>
                            <span>{feature}</span>
                          </li>)}
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              {/* Testing Process */}
              <div className="bg-carbon-black rounded-lg p-8 mb-8">
                <h2 className="font-display text-3xl mb-6">
                  TESTING METHODOLOGY
                </h2>
                <p className="text-gray-300 mb-6">
                  {reportData.testingMethodology}
                </p>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                  {reportData.testingStats.map((stat, index) => <div key={index} className="bg-earth-dark p-4 rounded-lg text-center">
                      <div className="text-outdoor-orange font-display text-2xl mb-1">
                        {stat.value}
                      </div>
                      <div className="text-gray-300 text-sm">{stat.label}</div>
                    </div>)}
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {reportData.images.slice(1, 3).map((image, index) => <img key={index} src={image} alt={`${reportData.title} testing ${index + 1}`} className="w-full h-64 object-cover rounded-lg" />)}
                </div>
              </div>
              {/* Performance Ratings */}
              <div className="bg-carbon-black rounded-lg p-8 mb-8">
                <h2 className="font-display text-3xl mb-6">
                  PERFORMANCE RATINGS
                </h2>
                <div className="space-y-6">
                  {reportData.performanceRatings.map((rating, index) => <div key={index}>
                      <div className="flex justify-between items-center mb-2">
                        <span className="font-bold">{rating.category}</span>
                        <span className="text-outdoor-orange font-display">
                          {rating.score}/10
                        </span>
                      </div>
                      <div className="h-2 bg-earth-dark rounded-full">
                        <div className="h-full bg-outdoor-orange rounded-full" style={{
                      width: `${rating.score / 10 * 100}%`
                    }}></div>
                      </div>
                      <p className="text-gray-300 text-sm mt-2">
                        {rating.comment}
                      </p>
                    </div>)}
                </div>
              </div>
              {/* Pros and Cons */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div className="bg-carbon-black rounded-lg p-8">
                  <h3 className="font-display text-2xl mb-4 text-forest-green">
                    PROS
                  </h3>
                  <ul className="space-y-3">
                    {reportData.pros.map((pro, index) => <li key={index} className="flex">
                        <div className="mr-2 mt-1 w-2 h-2 bg-forest-green rounded-full flex-shrink-0"></div>
                        <span>{pro}</span>
                      </li>)}
                  </ul>
                </div>
                <div className="bg-carbon-black rounded-lg p-8">
                  <h3 className="font-display text-2xl mb-4 text-climbing-red">
                    CONS
                  </h3>
                  <ul className="space-y-3">
                    {reportData.cons.map((con, index) => <li key={index} className="flex">
                        <div className="mr-2 mt-1 w-2 h-2 bg-climbing-red rounded-full flex-shrink-0"></div>
                        <span>{con}</span>
                      </li>)}
                  </ul>
                </div>
              </div>
              {/* Verdict */}
              <div className="bg-carbon-black rounded-lg p-8 mb-8">
                <h2 className="font-display text-3xl mb-6">FINAL VERDICT</h2>
                <p className="text-gray-300 mb-6">{reportData.verdict}</p>
                <div className="flex items-center">
                  <div className="flex mr-4">
                    {[...Array(5)].map((_, i) => <Star key={i} size={24} className={i < reportData.rating ? 'text-outdoor-orange fill-outdoor-orange' : 'text-gray-500'} />)}
                  </div>
                  <span className="text-xl font-bold">
                    {reportData.rating}/5 - {reportData.verdictSummary}
                  </span>
                </div>
              </div>
              {/* Reviewer */}
              <div className="bg-carbon-black rounded-lg p-8">
                <h2 className="font-display text-2xl mb-6">ABOUT THE TESTER</h2>
                <div className="flex">
                  <img src={reportData.reviewer.image} alt={reportData.reviewer.name} className="w-16 h-16 rounded-full object-cover mr-4" />
                  <div>
                    <h3 className="font-bold text-lg mb-1">
                      {reportData.reviewer.name}
                    </h3>
                    <p className="text-gray-400 mb-2">
                      {reportData.reviewer.role}
                    </p>
                    <p className="text-gray-300">{reportData.reviewer.bio}</p>
                  </div>
                </div>
              </div>
            </div>
            {/* Sidebar */}
            <div>
              <div className="bg-carbon-black rounded-lg p-6 mb-6 sticky top-24">
                <div className="flex justify-between items-center mb-6">
                  <h3 className="font-display text-xl">WHERE TO BUY</h3>
                  <span className="text-outdoor-orange font-display text-xl">
                    ${reportData.specs.price}
                  </span>
                </div>
                <div className="space-y-4 mb-6">
                  {reportData.whereToBuy.map((store, index) => <a key={index} href={store.url} target="_blank" rel="noopener noreferrer" className="flex justify-between items-center bg-earth-dark p-3 rounded hover:bg-earth-dark/70 transition-colors">
                      <span>{store.name}</span>
                      <div className="flex items-center">
                        <span className="mr-2">${store.price}</span>
                        <ShoppingCart size={16} />
                      </div>
                    </a>)}
                </div>
                <div className="space-y-3">
                  <button className="w-full bg-outdoor-orange hover:bg-climbing-red text-white font-display py-3 rounded transition-colors flex items-center justify-center">
                    <ShoppingCart size={16} className="mr-2" />
                    CHECK CURRENT PRICES
                  </button>
                  <div className="grid grid-cols-2 gap-3">
                    <button className="bg-earth-dark hover:bg-earth-dark/70 text-sand-light py-2 rounded transition-colors flex items-center justify-center">
                      <Share2 size={16} className="mr-2" />
                      SHARE
                    </button>
                    <button className="bg-earth-dark hover:bg-earth-dark/70 text-sand-light py-2 rounded transition-colors flex items-center justify-center">
                      <Bookmark size={16} className="mr-2" />
                      SAVE
                    </button>
                  </div>
                </div>
              </div>
              {/* Specifications */}
              <div className="bg-carbon-black rounded-lg p-6 mb-6">
                <h3 className="font-display text-xl mb-4">SPECIFICATIONS</h3>
                <div className="space-y-3">
                  {Object.entries(reportData.specifications).map(([key, value], index) => <div key={index} className="flex justify-between">
                        <span className="text-gray-400">{key}</span>
                        <span>{value}</span>
                      </div>)}
                </div>
              </div>
              {/* Related Products */}
              <div className="bg-carbon-black rounded-lg p-6">
                <h3 className="font-display text-xl mb-4">RELATED PRODUCTS</h3>
                <div className="space-y-4">
                  {reportData.relatedProducts.map((product, index) => <Link key={index} to={`/review/${product.id}`} className="block">
                      <div className="flex bg-earth-dark rounded-lg overflow-hidden hover:bg-earth-dark/70 transition-colors">
                        <img src={product.image} alt={product.name} className="w-20 h-20 object-cover" />
                        <div className="p-3">
                          <h4 className="font-bold text-sm mb-1">
                            {product.name}
                          </h4>
                          <div className="flex items-center">
                            <span className="text-outdoor-orange text-xs mr-1">
                              {'★'.repeat(product.rating)}
                            </span>
                            <span className="text-xs text-gray-400">
                              {product.rating}/5
                            </span>
                          </div>
                        </div>
                      </div>
                    </Link>)}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Comments Section */}
      <section className="py-12 bg-carbon-black">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <h2 className="font-display text-3xl mb-8">DISCUSSION</h2>
            <div className="flex items-center gap-4 mb-6">
              <button className="flex items-center bg-outdoor-orange hover:bg-climbing-red text-white px-4 py-2 rounded transition-colors">
                <ThumbsUp size={16} className="mr-2" />
                Helpful (42)
              </button>
              <button className="flex items-center border border-gray-600 hover:border-outdoor-orange text-sand-light hover:text-outdoor-orange px-4 py-2 rounded transition-colors">
                <MessageCircle size={16} className="mr-2" />
                Add Comment
              </button>
            </div>
            <div className="space-y-6">
              {reportData.comments.map((comment, index) => <div key={index} className="bg-earth-dark rounded-lg p-6">
                  <div className="flex items-start">
                    <img src={comment.avatar} alt={comment.name} className="w-10 h-10 rounded-full object-cover mr-4" />
                    <div className="flex-1">
                      <div className="flex justify-between items-center mb-2">
                        <h4 className="font-bold">{comment.name}</h4>
                        <span className="text-gray-400 text-sm">
                          {comment.date}
                        </span>
                      </div>
                      <p className="text-gray-300 mb-4">{comment.text}</p>
                      <div className="flex items-center">
                        <button className="text-gray-400 hover:text-outdoor-orange transition-colors flex items-center mr-4">
                          <ThumbsUp size={14} className="mr-1" />
                          <span>{comment.likes}</span>
                        </button>
                        <button className="text-gray-400 hover:text-outdoor-orange transition-colors">
                          Reply
                        </button>
                      </div>
                    </div>
                  </div>
                </div>)}
            </div>
          </div>
        </div>
      </section>
    </div>;
}
// Helper function to get report data by ID
function getReportById(productId) {
  const reports = {
    'arc-teryx-beta-ar': {
      title: "ARC'TERYX BETA AR JACKET",
      excerpt: 'Tested through torrential downpours in the Pacific Northwest, this premium shell delivers bombproof protection for serious alpine adventures.',
      heroImage: 'https://images.unsplash.com/photo-1608235375712-be654ace4420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80',
      category: 'Shell Jackets',
      brand: "Arc'teryx",
      rating: 5,
      date: '2023-05-15',
      images: ['https://images.unsplash.com/photo-1608235375712-be654ace4420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', 'https://images.unsplash.com/photo-1602572177765-72017e3d27f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', 'https://images.unsplash.com/photo-1544441892-794166f1e3be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'],
      specs: {
        price: 599,
        weight: '415g (14.6oz)',
        bestFor: 'Alpine Climbing, Hiking'
      },
      keyFeatures: ['GORE-TEX Pro 3-layer waterproof/breathable fabric', 'Helmet-compatible StormHood™', 'WaterTight™ pit zips for ventilation', 'Harness-compatible hand pockets', 'Articulated patterning for unrestricted movement', 'Durable Water Repellent (DWR) finish'],
      testingMethodology: "We subjected the Arc'teryx Beta AR to 45 days of intense testing across three seasons in the Pacific Northwest. This included 12 days of continuous rain in Olympic National Park, multiple alpine climbing routes in the North Cascades, and high-altitude trekking in deteriorating weather conditions. The jacket was evaluated for waterproofness, breathability, durability, comfort, and overall functionality in demanding environments.",
      testingStats: [{
        value: '45',
        label: 'Days Tested'
      }, {
        value: '12',
        label: 'Hours of Continuous Rain'
      }, {
        value: '14,410ft',
        label: 'Max Elevation'
      }],
      performanceRatings: [{
        category: 'Waterproofing',
        score: 10,
        comment: 'Absolutely bombproof even in sustained heavy rain and driving wind.'
      }, {
        category: 'Breathability',
        score: 8,
        comment: 'Excellent for a fully waterproof shell, though can get warm during high-output activities.'
      }, {
        category: 'Durability',
        score: 9,
        comment: 'Showed minimal signs of wear after scraping against rock and heavy pack use.'
      }, {
        category: 'Weight/Packability',
        score: 7,
        comment: 'Not ultralight, but packs down reasonably small for the protection offered.'
      }, {
        category: 'Features/Design',
        score: 10,
        comment: 'Thoughtfully designed with climbers and mountaineers in mind.'
      }, {
        category: 'Value',
        score: 7,
        comment: 'Expensive, but the performance and durability justify the investment.'
      }],
      pros: ['Exceptional waterproofing and wind protection', 'Durable construction that stands up to abuse', 'Excellent hood design that works with or without a helmet', 'Well-placed pockets that remain accessible with a harness', 'Articulated design allows for full range of motion', 'Consistent performance across a wide range of conditions'],
      cons: ['Premium price point puts it out of reach for many', 'Heavier than some competing shells', 'Can feel stiff when new, requires break-in period', 'Not as breathable as some newer membrane technologies'],
      verdict: "The Arc'teryx Beta AR Jacket represents the gold standard in all-around mountain shells. While the price point is undeniably steep, the combination of bombproof weather protection, thoughtful design, and exceptional durability makes it a worthwhile investment for serious outdoor enthusiasts. Throughout our testing, it consistently performed in the harshest conditions, keeping testers dry and comfortable when other shells would have failed. For those who venture into demanding alpine environments and prioritize reliable protection above all else, the Beta AR is worth every penny.",
      verdictSummary: 'Exceptional',
      specifications: {
        Material: 'N80p-X GORE-TEX Pro 3L',
        Fit: 'Athletic, with room for layers',
        'Center Back Length': '80.4cm / 31.7in',
        Hood: 'Helmet-compatible StormHood™',
        Pockets: '2 hand, 1 internal chest',
        'Pit Zips': 'Yes, WaterTight™',
        'Hem Adjustment': 'Yes, single-handed',
        'Cuff Adjustment': 'Velcro',
        'Seam Sealing': 'Fully taped',
        'DWR Treatment': 'Yes'
      },
      whereToBuy: [{
        name: "Arc'teryx",
        price: 599,
        url: '#'
      }, {
        name: 'REI',
        price: 599,
        url: '#'
      }, {
        name: 'Backcountry',
        price: 599,
        url: '#'
      }],
      reviewer: {
        name: 'Michael Torres',
        role: 'Senior Gear Tester',
        image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
        bio: 'Michael has been testing outdoor gear professionally for over a decade, with a focus on alpine climbing equipment and apparel. He has summited peaks on six continents and logged more than 300 days in the backcountry over the past three years.'
      },
      relatedProducts: [{
        id: 'patagonia-triolet',
        name: 'Patagonia Triolet Jacket',
        image: 'https://images.unsplash.com/photo-1602572177765-72017e3d27f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
        rating: 4
      }, {
        id: 'mammut-nordwand-pro',
        name: 'Mammut Nordwand Pro HS Hooded Jacket',
        image: 'https://images.unsplash.com/photo-1544441892-794166f1e3be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
        rating: 5
      }, {
        id: 'rab-muztag-gtx',
        name: 'Rab Muztag GTX Jacket',
        image: 'https://images.unsplash.com/photo-1608235375712-be654ace4420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
        rating: 4
      }],
      comments: [{
        name: 'Alex Johnson',
        avatar: 'https://images.unsplash.com/photo-1548535537-3cfaf1fc327c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
        date: 'May 18, 2023',
        text: "I've had my Beta AR for 6 years now and it's still going strong. Best gear investment I've ever made. Completely agree with this review.",
        likes: 12
      }, {
        name: 'Sarah Miller',
        avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
        date: 'May 20, 2023',
        text: "How does it compare to the Alpha SV? I'm trying to decide between the two for primarily alpine climbing.",
        likes: 5
      }, {
        name: 'Ryan Parker',
        avatar: 'https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
        date: 'May 22, 2023',
        text: 'I wish they would make these in more bright colors for visibility in alpine environments. The current color options are too muted for my taste.',
        likes: 3
      }]
    },
    'la-sportiva-ultra-raptor-2': {
      title: 'LA SPORTIVA ULTRA RAPTOR II',
      excerpt: 'After 500 kilometers of technical alpine trails, these rugged trail runners proved their worth on rocky, muddy, and steep terrain.',
      heroImage: 'https://images.unsplash.com/photo-1465479423260-c4afc24172c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80',
      category: 'Trail Running',
      brand: 'La Sportiva',
      rating: 4,
      date: '2023-04-28',
      images: ['https://images.unsplash.com/photo-1465479423260-c4afc24172c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', 'https://images.unsplash.com/photo-1606753930828-fdcc943a273e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', 'https://images.unsplash.com/photo-1584735174914-6b1272458e3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'],
      specs: {
        price: 165,
        weight: '350g (12.3oz) per shoe',
        bestFor: 'Technical Trails, Long Distances'
      },
      keyFeatures: ['FriXion XF 2.0 rubber compound outsole', 'Impact Brake System for downhill traction', 'MEMlex EVA midsole with TPU stabilizers', 'AirMesh upper with microfiber reinforcements', 'TPU toe cap for protection', 'Cushioned ankle collar'],
      testingMethodology: 'We tested the La Sportiva Ultra Raptor II across 500 kilometers of varied terrain, including the rocky trails of the Dolomites, muddy Pacific Northwest forest paths, and high alpine routes in the Sierra Nevada. Multiple testers with different foot shapes and running styles evaluated the shoes for traction, durability, comfort, protection, and stability across a range of conditions and distances.',
      testingStats: [{
        value: '500',
        label: 'Kilometers Tested'
      }, {
        value: '8',
        label: 'Different Testers'
      }, {
        value: '12,000+',
        label: 'Elevation Gain (m)'
      }],
      performanceRatings: [{
        category: 'Traction',
        score: 9,
        comment: 'Excellent grip on wet rocks, loose scree, and muddy trails.'
      }, {
        category: 'Durability',
        score: 8,
        comment: 'Shows minimal wear after extensive testing on abrasive terrain.'
      }, {
        category: 'Comfort',
        score: 7,
        comment: 'Good for narrow to medium feet, but may feel restrictive for wide feet.'
      }, {
        category: 'Protection',
        score: 9,
        comment: 'Superior rock protection and toe cap prevents injuries on technical terrain.'
      }, {
        category: 'Stability',
        score: 8,
        comment: 'Provides confident footing on uneven and technical trails.'
      }, {
        category: 'Value',
        score: 8,
        comment: 'Premium price but justified by performance and durability.'
      }],
      pros: ['Outstanding traction on technical terrain', 'Excellent protection from rocks and trail hazards', 'Durable construction that stands up to heavy use', 'Stable platform for uneven terrain', 'Good cushioning for long distances', 'Effective toe cap prevents stubbed toes'],
      cons: ['Runs narrow, not ideal for wide feet', 'Heavier than many trail running competitors', 'Limited breathability in hot conditions', 'Break-in period required for optimal comfort'],
      verdict: 'The La Sportiva Ultra Raptor II excels as a durable, protective trail running shoe for technical terrain. While not the lightest option available, its combination of bomber protection, excellent traction, and long-term durability makes it an outstanding choice for runners who prioritize sure-footed performance over minimal weight. The shoe particularly shines on rocky, technical trails where protection and grip are paramount. Runners with wider feet should look elsewhere, but those with narrow to medium width feet will find a reliable partner for their most demanding trail adventures.',
      verdictSummary: 'Highly Recommended',
      specifications: {
        Upper: 'AirMesh with microfiber reinforcements',
        Midsole: 'Compression molded MEMlex with TPU stabilizers',
        Outsole: 'FriXion XF 2.0 rubber with Impact Brake System',
        Drop: '12mm',
        'Stack Height': '32mm heel / 20mm forefoot',
        'Rock Guard': 'Yes, TPU shank',
        'Toe Cap': 'Yes, TPU',
        'Lacing System': 'Traditional with lace garage',
        'Gaiter Attachment': 'Yes',
        Weight: "350g (12.3oz) per shoe (US Men's 9)"
      },
      whereToBuy: [{
        name: 'La Sportiva',
        price: 165,
        url: '#'
      }, {
        name: 'REI',
        price: 165,
        url: '#'
      }, {
        name: 'Backcountry',
        price: 159,
        url: '#'
      }],
      reviewer: {
        name: 'Elena Rodriguez',
        role: 'Trail Running Specialist',
        image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
        bio: 'Elena is an ultra-runner with over 20 races of 50+ miles completed. She specializes in testing footwear and running gear across challenging mountain terrain and has logged more than 2,000 miles of trail running annually for the past five years.'
      },
      relatedProducts: [{
        id: 'hoka-speedgoat-5',
        name: 'Hoka Speedgoat 5',
        image: 'https://images.unsplash.com/photo-1584735175074-489aedbd579c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
        rating: 4
      }, {
        id: 'salomon-speedcross-6',
        name: 'Salomon Speedcross 6',
        image: 'https://images.unsplash.com/photo-1606753930828-fdcc943a273e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
        rating: 4
      }, {
        id: 'brooks-cascadia-16',
        name: 'Brooks Cascadia 16',
        image: 'https://images.unsplash.com/photo-1584735174914-6b1272458e3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
        rating: 3
      }],
      comments: [{
        name: 'Miguel Santos',
        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
        date: 'May 1, 2023',
        text: "I've put about 300 miles on mine so far and completely agree with this review. The traction is incredible on wet rocks!",
        likes: 8
      }, {
        name: 'Tina Chen',
        avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
        date: 'May 3, 2023',
        text: 'These were way too narrow for my feet. Had to return them after just one run. Wish they made them in wide sizes.',
        likes: 4
      }]
    }
    // Additional reports would be defined here
  };
  return reports[productId];
}